<template>
    <div class="merchantClass">
        <div class="swiper-container">
            <div class="swiper-wrapper" >
                <div class="swiper-slide Mitem" v-for="(item,index) in mailData" :key="index" :class="{'Citem':item.local}" @click="handleMenu(item,index)">
                    <p class="mitem_conect">{{item.name}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable*/
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
    data() {
        return {
            dowmn: true, // 菜单展开
            packup: false, // 菜单收起
            Nodata: false, // 无数据提示
            mailData: [ // 4星以上评价选择
                {local: true, name: '全部'},
                {local: false, name: '态度'},
                {local: false, name: '专业'},
                {local: false, name: '幽默'}
            ],
            menuData: [], // 菜单导航数据
            pageNum: 1, // 页码
            scrollTop: 0, // 可滚动区域的高度
            downRefresh: true, // 顶部下拉数据刷新提示
            dataLoaded: false, // 无数据最下角信息提示
            dataLoding: false, // 数据请求的等待加载
            camId: '', // 商品类别id
            swerperindex: '',
            changeindex: '', // 改变的勾选
            stails: '',
        }
    },
    mounted() {
        this.swiperList()
    },
    methods: {
        swiperList() { // 实例化swiper函数
            var swiper = new Swiper('.swiper-container', {
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                initialSlide: 0, // 初始位置设置
                // direction: 'horizontal', // horizontal横向滑动、vertical纵向滑动
                effect: 'coverflow', //3d滑动
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                loop:true,
                slidesPerView: 2,
                coverflow: {
                    rotate: 0,  //设置为0
                    stretch: 0,
                    depth: 200,
                    modifier: 2,
                    slideShadows : true
                },
                onTouchEnd: function(iper, even) {
                    // console.log(event.target)
                    // swiper.startAutoplay()
                    console.log(iper.activeIndex)
                },
                onTouchMove: function(iper, event) {
                    // console.log(iper.activeIndex)
                    // swiper.startAutoplay()
                },
                onSlideChangeEnd: function(swiper){
                    // alert(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
                    // console.log(swiper.activeIndex)
                },
                slidesPerView: 2, // 宽度调整
                spaceBetween: 20, // item间距
                slidesOffsetBefore: 0,
                centeredSlides: true
            })
        },
    },
    created() {
    }
}
</script>

<style lang="less">
.merchantClass{
    width: 100%;
    height: 500px;
    .Mitem{
        height: 200px;
        .mitem_conect{
            border-radius: 5px;
            border: 1px solid red;
            width: 100%;
            height: 180px;
        }
    }
}
</style>
